<template>
	<view class="wl-modal" v-if="visible">
		<!-- modal-center-out -->
		<view class="wl-modal-body" :class=" visible?'modal-center-enter':''">
			<view class="wl-modal-body-title f-wb" v-if="title">
				{{title}}
			</view>
			<view class="wl-modal-body-content" :style="{textAlign: textAlign}">
				<slot name="content">
					{{content}}
				</slot>
			</view>
			<view class="wl-modal-body-button">
				<button :open-type="cancelOpenType" class="wl-modal-body-button-item" @tap="cancel" :style="{color: cancelColor}" v-if="showCancel && cancelText">
					{{cancelText}}
				</button>
				<button :open-type="confirmOpenType" class="wl-modal-body-button-item f-wb" @tap="confirm" :style="{color: confirmColor}" v-if="confirmText">
					{{confirmText}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'wl-modal',
		data() {
			return {
				visible: false, // 是否显示
				title: '', // 提示标题
				content: '', // 提示内容
				cancelText: '取消', // 取消按钮的文字  
				confirmText: '确定', // 确认按钮文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#576B95', // 确定按钮颜色
				cancelColor: '#666', // 取消按钮颜色
				textAlign: 'left', // 对齐方式
				confirmOpenType: '', // 确定按钮open-type
				cancelOpenType: '', // 取消按钮open-type
				success: () => {} // 回调方法
			}
		},
		methods: {
			// 初始化弹框并打开
			showModal(data) {
				Object.assign(this, data);
				this.visible = true
			},
			// 取消
			cancel() {
				this.success({
					cancel: true,
					confirm: false,
					errMsg: 'showModal:ok'
				});
				this.visible = false;
			},
			// 确定
			confirm() {
				this.success({
					cancel: false,
					confirm: true,
					content: null,
					errMsg: 'showModal:ok'
				});
				this.visible = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 显示和隐藏效果
	@keyframes modal-center-enter {
		0% {
			opacity: 0;
			transform: scale(0.7);
		}

		to {
			opacity: 1;
		}
	}

	// @keyframes modal-center-out {
	// 	0% {
	// 		opacity: 1;
	// 	}

	// 	to {
	// 		opacity: 0;
	// 		transform: scale(0.7);
	// 	}

	// }

	.wl-modal {
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		.wl-modal-body {
			width: 640rpx;
			padding-top: 40rpx;
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			display: table-cell;
			vertical-align: middle;

			&.modal-center-enter {
				animation: modal-center-enter 0.2s ease-out forwards;
			}
			// &.modal-center-out {
			// 	animation: modal-center-out 0.2s ease-out forwards;
			// }

			.wl-modal-body-title {
				font-size: 34rpx;
				// font-weight: 900;
				color: #000;
				text-align: center;
				margin-bottom: 32rpx;
				padding: 0 48rpx;
				box-sizing: border-box;
			}

			.wl-modal-body-content {
				font-size: 34rpx;
				line-height: 48rpx;
				color: #666;
				word-break: break-all;
				word-wrap: break-word;
				white-space: pre-wrap;
				margin-bottom: 32rpx;
				padding: 0 48rpx;
				box-sizing: border-box;
			}

			.wl-modal-body-button {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: #E5E5E5 1px solid;

				.wl-modal-body-button-item {
					&::after {
						border: none;
					}

					border-right: #E5E5E5 1px solid;
					background-color: initial;
					font-size: 34rpx;
					border-radius: 0;
					flex: auto;
					box-sizing: border-box;
					text-align: center;
					padding: 30rpx 16rpx;
					// font-weight: 900;
					line-height: normal;
					overflow: initial !important;

					&:last-child {
						border-right: 0;
					}
				}
			}
		}
	}
</style>